<template>
  <div class="public-shop-cart">
    <h3>我的订单</h3>
    <h2 v-show="flag">还没有提交的订单</h2>
    <el-descriptions
      direction="vertical"
      :column="4"
      v-for="item in orderList"
      :key="item.id"
      border
    >
      <el-descriptions-item align="center" width="150px" label="购买日期">{{
        item.orderTime
      }}</el-descriptions-item>
            <el-descriptions-item align="center" width="80px" label="合计">
        {{ item.sumPrice }}元
        </el-descriptions-item>
      <el-descriptions-item align="center" min-width="750px" label="已购商品">
        <template v-for="(j, index) in item.order" :key="index"
          ><span>{{ j.name }}*{{ j.number }}件</span></template
        >
      </el-descriptions-item>
      

      
      


    </el-descriptions>
    <div class="page">
      <el-pagination
        background
        :hide-on-single-page="flag"
        v-model:currentPage="page"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15]"
        layout=",prev, pager, next"
        :total="num"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { ref, onMounted } from "vue";
import { handOrder } from "@/api/api.js";
export default {
  name: "order",
  setup() {
    const route = useRoute();
    const store = useStore();
    // 当前第几页
    const page = ref(1);
    // 每页显示几条数据
    const limit = ref(5);
    // 数据总条数
    const num = ref();
    // 没有数据不显示分页按钮
    const flag = ref(true)
    // 订单列表
    let orderList = ref();
    // 登录用户的id
    const userId = store.state.userInfo.info.id;
    onMounted(() => {
      handOrder("get", page.value, limit.value, userId).then((res) => {
        num.value = res.headers["x-total-count"] * 1;
        orderList.value = res.data;
        if (num.value != 0) {
          flag.value = false
        }else{
          flag.value = true
        }
      });
    });
    //
    const handleCurrentChange = () => {
      handOrder("get", page.value, limit.value, userId).then((res) => {
        num.value = res.headers["x-total-count"] * 1;
        orderList.value = res.data;
      });
    };
    //  切换一页显示数据条数
    const handleSizeChange = () => {
      handOrder("get", page.value, limit.value, userId).then((res) => {
        num.value = res.headers["x-total-count"] * 1;
        orderList.value = res.data;
      });
    };
    return {
      orderList,
      limit,
      page,
      num,
      flag,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>


<style lang="scss" scoped>
.public-shop-cart {
  width: 70%;
  min-width: 1090px;
  min-height: 616px;
  background-color: #dcdcdc;
  position: relative;
  margin: 20px auto;
  border-radius: 10px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  h2{
    text-align: center;
    line-height: 400px;
  }
  h3 {
    text-align: center;
    margin-top: 20px;
  }
  .el-descriptions {
    margin-top: 20px;
  }
}
.el-descriptions__cell {
  span {
    margin-right: 10px;
  }
}
.page {
  position: absolute;
  left: 40%;
  bottom: 10px;
}
</style>